<template>
  <div>
    <!-- <div class="item_title">业绩发放情况</div> -->
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      id="out-table"
      >
      <el-table-column
        prop="extendNum"
        label="批次">
      </el-table-column>
      <el-table-column
        prop="date"
        label="月份">
      </el-table-column>
      <el-table-column
        prop="memberNum"
        label="会员编号">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="bankNum"
        label="银行账号">
      </el-table-column>
      <el-table-column
        prop="bankName"
        label="名称">
      </el-table-column>
      <el-table-column
        width="200"
        prop="way"
        label="发放途径">
      </el-table-column>
      <el-table-column
        prop="storeNum"
        label="店号">
      </el-table-column>
      <el-table-column
        prop="allPrice"
        label="应发">
      </el-table-column>
      <el-table-column
        prop="balance"
        label="余额">
      </el-table-column>
      <el-table-column
        prop="tax"
        label="扣税/手续费">
      </el-table-column>
      <el-table-column
        prop="truePrice"
        label="实发">
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="dialogTableVisible = true">明细</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage1"
        :page-size="100"
        layout="prev, pager, next, jumper"
        :total="1000">
      </el-pagination>
    </div>
    <div style="clear:both"></div>
    <div v-show="dialogTableVisible">
      <div class="item_title">奖金来源</div>
      <el-table
        :data="tableData2"
        border
        style="width: 100%"
        id="out-table">
        <el-table-column
          prop="batch"
          label="批次">
        </el-table-column>
        <el-table-column
          prop="memberNum"
          label="会员编号">
        </el-table-column>
        <el-table-column
          prop="memberName"
          label="会员姓名">
        </el-table-column>
        <el-table-column
          prop="entryBatch"
          label="录入批次">
        </el-table-column>
        <el-table-column
          prop="type"
          label="类别">
        </el-table-column>
        <el-table-column
          prop="month"
          label="月份">
        </el-table-column>
        <el-table-column
          prop="remark"
          label="备注">
        </el-table-column>
        <el-table-column
          prop="reason"
          label="原因">
        </el-table-column>
        <el-table-column
          prop="price"
          label="金额">
        </el-table-column>
      </el-table>
      <div class="item_title">奖金分配</div>
      <div>
        <span class="item">
          <span class="item_word">会员编号：</span>
          <span class="item_input">00001118</span>
        </span>
        <span class="item">
          <span class="item_word">会员姓名：</span>
          <span class="item_input">李丽</span>
        </span>
        <span class="item">
          <span class="item_word">月份：</span>
          <span class="item_input">2018.06</span>
        </span>
        <span class="item">
          <span class="item_word">计算金额：</span>
          <span class="item_input">10000.00</span>
        </span>
        <span class="item">
          <span class="item_word">补扣金额：</span>
          <span class="item_input">10000.00</span>
        </span>
        <span class="item">
          <span class="item_word">本月应发：</span>
          <span class="item_input">20000.00</span>
        </span>
        <span class="item">
          <span class="item_word">转礼券：</span>
          <span class="item_input">0.00</span>
        </span>
        <span class="item">
          <span class="item_word">发票金额：</span>
          <span class="item_input">20000.00</span>
        </span>
        <span class="item">
          <span class="item_word"></span>
          <span class="item_input"></span>
        </span>
        <span class="item">
          <span class="item_word">人力公司工资：</span>
          <span class="item_input">0.00</span>
        </span>
        <span class="item">
          <span class="item_word">工资扣税：</span>
          <span class="item_input">0.00</span>
        </span>
        <span class="item">
          <span class="item_word">实发工资：</span>
          <span class="item_input">20000.00</span>
        </span>
        <span class="item">
          <span class="item_word">工资银行账号：</span>
          <span class="item_input">xxx</span>
        </span>
        <span class="item">
          <span class="item_word">工资银行名称：</span>
          <span class="item_input">xx银行</span>
        </span>
        <span class="item">
          <span class="item_word"></span>
          <span class="item_input"></span>
        </span>
        <span class="item">
          <span class="item_word">人力公司：</span>
          <span class="item_input">xx公司</span>
        </span>
        <span class="item">
          <span class="item_word">服务公司/服务中心：</span>
          <span class="item_input">xx公司</span>
        </span>
        
       
      </div>
    </div>
  </div>
</template>

<script>
  import FileSaver from 'file-saver'
  import XLSX from 'xlsx'
  export default {
    data() {
      return {
        // 奖金明细弹窗
        dialogTableVisible:false,
        // 是否显示奖金来源
        showPriceFrom:false,
        // 分页
        currentPage1:2,
        currentPage2:2,
        currentPage3:2,
        tableData: [{
          extendNum:"2018050011",
          date: '2018-05',
          memberNum:"00001118",
          name: '李丽',
          bankNum:"xxxxx",
          bankName:"xx银行",
          way:"转礼券后开票领取",
          storeNum:"6025010",
          allPrice:"15488.00",
          balance:"0.00",
          tax:"0.00",
          truePrice:"15236.00"
        },{
          extendNum:"2018040011",
          date: '2018-04',
          memberNum:"00001118",
          name: '李丽',
          bankNum:"xxxxx",
          bankName:"xx银行",
          way:"转礼券后开票领取",
          storeNum:"6025010",
          allPrice:"25488.00",
          balance:"0.00",
          tax:"0.00",
          truePrice:"25236.00"
        },{
          extendNum:"2018030011",
          date: '2018-03',
          memberNum:"00001118",
          name: '李丽',
          bankNum:"xxxxx",
          bankName:"xx银行",
          way:"转礼券后开票领取",
          storeNum:"6025010",
          allPrice:"15688.00",
          balance:"0.00",
          tax:"0.00",
          truePrice:"15436.00"
        }],
        tableData2:[
          {
            batch:"2018050001",
            memberNum:"00001118",
            memberName:"李丽",
            entryBatch:"S2018050001",
            type:"扣税金额",
            month:"2018.05",
            remark:"持续进步奖",
            reason:"个人提成",
            price:"125"
          },
          {
            batch:"2018050001",
            memberNum:"00001118",
            memberName:"李丽",
            entryBatch:"S2018050001",
            type:"扣税金额",
            month:"2018.05",
            remark:"一般计算结果",
            reason:"个人提成",
            price:"125"
          },
          {
            batch:"2018050001",
            memberNum:"00001118",
            memberName:"李丽",
            entryBatch:"S2018050001",
            type:"扣税金额",
            month:"2018.05",
            remark:"30%计算结果",
            reason:"利益保障制度金额",
            price:"125"
          },
        ],
        tableData3:[
          {
            memberNum:"00001118",
            memberName:"李丽",
            month:"2018.05",
            calPrice:"51253.00",
            surplusPrice:"26224.00",
            currentMonthPrice:"77477.00",
            changePrice:"0.00",
            billPrice:"77477.00",
            humanPrice:"0.00",
            tax:"0.00",
            truePrice:"0.00",
            bankNum:"xxx",
            bankName:"xxx银行",
            companyName:"xxx公司",
            networkNum:"6020470",
            otherCompanyNum:"01000",
            surplusBasePay:"0.00",
            basePay:"0.00",
            storePrice:"0.00",
            storePrice2:"0.00",
            reward:"0.00",
            lastMonthApply:"0.00",
            currentMonthApply:"0.00",
            socialSecurity:"0.00",
            type:"客户经理"

          },
        ],
        
      }
    },
    methods:{
      // 分页
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      exportExcel () {
         /* generate workbook object from table */
         var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
         /* get binary string as output */
         var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
         try {
             FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'sheetjs.xlsx')
         } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
         return wbout
     },
    }
  }
</script>
<style scoped>
.checkThing{
  text-align: center;
}

.noSendPrice{
  float: left;
  margin:5px 0;
}
.item{
  width:33%
}
.item_word{
  width: 52%;
}
.item_input{
  width: 45%;
}
</style>